/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/**
 * copyright 2024 codevision
 */

/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

    /**
     * colors
     */
  
    --violet-blue-crayola: hsla(234, 50%, 64%, 1);
    --dark-cornflower-blue_a7: hsla(214, 88%, 27%, 0.07);
    --white: hsla(0, 0%, 100%, 1);
    --white_a3: hsla(0, 0%, 100%, 0.03);
    --white_a8: hsla(0, 0%, 100%, 0.08);
    --white_a12: hsla(0, 0%, 100%, 0.12);
    --white_a70: hsla(0, 0%, 100%, 0.7);
    --cultured: hsla(220, 20%, 97%, 1);
    --lavender-web: hsla(233, 52%, 94%, 1);
    --cadet-blue-crayola: hsla(220, 12%, 70%, 1);
    --cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2);
    --charcoal: hsla(218, 22%, 26%, 1);
    --raisin-black: hsla(216, 14%, 14%, 1);
    --light-gray: hsla(0, 0%, 79%, 1);
    --blue-crayola: hsla(219, 72%, 56%, 1);
    --black-coral: hsla(220, 12%, 43%, 1);
  
    /**
     * typography
     */
  
    --ff-manrope: 'Manrope', sans-serif;
  
    --fs-1: calc(2.7rem + 1.38vw);
    --fs-2: calc(2.6rem + .66vw);
    --fs-3: 2.2rem;
    --fs-4: 1.9rem;
    --fs-5: 1.8rem;
    --fs-6: 1.7rem;
    --fs-7: 1.5rem;
    --fs-8: 1.4rem;
    
    --fw-700: 700;
  
    /** 
     * spacing
     */
  
    --section-padding: 90px;
  
    /**
     * box shadow
     */
  
    --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
    --shadow-2: 0 0 0 0.05rem hsla(214, 88%, 27%, 0.08), 0 0 1.25rem hsla(216, 14%, 14%, 0.06);
    --shadow-3: 0 0 1.25rem hsla(216, 14%, 14%, 0.04);
  
    /**
     * border radius
     */
  
    --radius-circle: 50%;
    --radius-pill: 100px;
    --radius-10: 10px;
    --radius-8: 8px;
    --radius-6: 6px;
  
    /**
     * transition
     */
  
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --transition-3: 0.3s ease-in-out;
  
  }
  
  
  
  
  
  /*-----------------------------------*\
    #RESET
  \*-----------------------------------*/
  
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  li { list-style: none; }
  
  a,
  img,
  span,
  input,
  button,
  ion-icon { display: block; }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  img { height: auto; }
  
  input,
  button {
    background: none;
    border: none;
    font: inherit;
  }
  
  input { width: 100%; }
  
  button { cursor: pointer; }
  
  ion-icon { pointer-events: none; }
  
  address { font-style: normal; }
  
  html {
    font-family: var(--ff-manrope);
    font-size: 10px;
    scroll-behavior: smooth;
  }
  
  body {
    background-color: var(--white);
    color: var(--black-coral);
    font-size: 1.6rem;
    line-height: 1.7;
  }
  
  body.nav-active { overflow: hidden; }
  
  ::-webkit-scrollbar { width: 10px; }
  
  ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }
  
  ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
  
  ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
  
  
  
  
  
  /*-----------------------------------*\
    #REUSED STYLE
  \*-----------------------------------*/
  
  .container { padding-inline: 16px; }
  
  .social-list {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .social-link {
    font-size: 2rem;
    transition: var(--transition-1);
  }
  
  .social-link:is(:hover, :focus-visible) { transform: translateY(-3px); }
  
  .section { padding-block: var(--section-padding); }
  
  .has-bg-image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  
  .h1,
  .h2,
  .h3,
  .h4,
  .h5 {
    color: var(--charcoal);
    font-weight: var(--fw-700);
    line-height: 1.3;
  }
  
  .h1 { font-size: var(--fs-1); }
  
  .h2 { font-size: var(--fs-2); }
  
  .h3 { font-size: var(--fs-3); }
  
  .h4 { font-size: var(--fs-4); }
  
  .h5 { font-size: var(--fs-6); }
  
  .btn {
    color: var(--white);
    font-size: var(--fs-6);
    font-weight: var(--fw-700);
    border: 2px solid var(--white);
    max-width: max-content;
    padding: 12px 28px;
    border-radius: var(--radius-pill);
    transition: var(--transition-1);
    will-change: transform;
  }
  
  .btn:is(:hover, :focus-visible) { transform: translateY(-4px); }
  
  .btn-primary,
  .btn-outline:is(:hover, :focus-visible) {
    background-color: var(--white);
    color: var(--charcoal);
  }
  
  .img-holder {
    aspect-ratio: var(--width) / var(--height);
    background-color: var(--light-gray);
    overflow: hidden;
  }
  
  .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .section-subtitle {
    font-size: var(--fs-7);
    text-transform: uppercase;
    color: var(--violet-blue-crayola);
    font-weight: var(--fw-700);
    margin-block-end: 16px;
  }
  
  .grid-list {
    display: grid;
    gap: 25px;
  }
  
  .w-100 { width: 100%; }
  
  
  
  
  
  /*-----------------------------------*\
    #HEADER
  \*-----------------------------------*/
  
  .header .btn { display: none; }
  
  .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-block: 20px;
    box-shadow: var(--shadow-1);
    z-index: 4;
    background-color: rgb(47, 140, 215);
  }
  
  .header.active {
    background-color: var(--white);
    position: fixed;
    animation: slideIn 0.5s ease forwards;
  }
  
  @keyframes slideIn {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
  }
  
  .header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  
  .header.active .logo-light,
  .header .logo-dark { display: none; }
  
  .header .logo-light,
  .header.active .logo-dark { display: block; }
  
  .nav-open-btn {
    font-size: 3.5rem;
    color: var(--white);
  }
  
  .header.active .nav-open-btn { color: var(--charcoal); }
  
  .navbar {
    position: fixed;
    top: 0;
    left: -300px;
    background-color: var(--raisin-black);
    color: var(--white);
    max-width: 300px;
    width: 100%;
    height: 100vh;
    padding: 30px;
    padding-block-end: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 2;
    visibility: hidden;
    transition: var(--transition-3);
  }
  
  .navbar.active {
    visibility: visible;
    transform: translateX(300px);
  }
  
  .navbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-close-btn {
    background-color: var(--white_a8);
    color: var(--white);
    font-size: 2rem;
    padding: 6px;
    border-radius: var(--radius-circle);
    transition: var(--transition-1);
  }
  
  .nav-close-btn ion-icon { --ionicon-stroke-width: 50px; }
  
  .nav-close-btn:is(:hover, :focus-visible) { background-color: var(--white_a12); }
  
  .navbar-list { margin-block-end: auto; }
  
  .navbar-link {
    font-weight: var(--fw-700);
    padding-block: 6px;
  }
  
  .contact-link { transition: var(--transition-1); }
  
  .contact-link:is(:hover, :focus-visible) { color: var(--violet-blue-crayola); }
  
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--raisin-black);
    pointer-events: none;
    opacity: 0;
    transition: var(--transition-1);
  }
  
  .overlay.active {
    pointer-events: all;
    opacity: 0.8;
  }
  
  
  
  
  
  /*-----------------------------------*\
    #HERO
  \*-----------------------------------*/
  
  .hero {
    padding-block-start: calc(var(--section-padding) + 70px);
    text-align: center;
  }
  
  .hero .container {
    display: grid;
    gap: 70px;
  }
  
  .hero-title { color: var(--white); }
  
  .hero-text {
    font-size: var(--fs-5);
    color: var(--white);
    margin-block: 24px 36px;
  }
  
  .btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  
  .hero-slider,
  .hero-card { position: relative; }
  
  .hero-card .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white);
    color: var(--charcoal);
    font-size: 2rem;
    padding: 25px;
    border-radius: var(--radius-circle);
    transition: var(--transition-1);
    animation: pulse 2s ease infinite;
  }
  
  .hero-card .play-btn:is(:hover, :focus-visible) { color: var(--violet-blue-crayola); }
  
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 var(--white_a70); }
    75% { box-shadow: 0 0 0 20px transparent; }
  }
  
  .hero .slider-inner {
    border-radius: var(--radius-10);
    overflow: hidden;
  }
  
  .hero .slider-container {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    transition: var(--transition-2);
  }
  
  .hero .slider-item {
    min-width: 100%;
    width: 100%;
    border-radius: var(--radius-10);
    overflow: hidden;
  }
  
  .hero .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--white_a70);
    color: var(--charcoal);
    font-size: 2rem;
    padding: 12px;
    border-radius: var(--radius-circle);
    transition: var(--transition-1);
  }
  
  .hero .slider-btn:is(:hover, :focus-visible) { background-color: var(--white); }
  
  .hero .slider-btn.prev { left: 20px; }
  
  .hero .slider-btn.next { right: 20px; }
  
  
  
  
  
  /*-----------------------------------*\
    #SERVICE
  \*-----------------------------------*/
  
  .service { text-align: center; }
  
  .service .section-title { margin-block-end: 50px; }
  
  .service-card {
    padding: 40px;
    box-shadow: var(--shadow-2);
    border-radius: var(--radius-6);
  }
  
  .service-card .card-icon {
    width: 60px;
    height: 60px;
    background-color: var(--violet-blue-crayola);
    display: grid;
    place-items: center;
    color: var(--white);
    font-size: 2.5rem;
    border-radius: var(--radius-circle);
    margin-inline: auto;
  }
  
  .service-card .card-icon ion-icon { --ionicon-stroke-width: 50px; }
  
  .service-card .card-title { margin-block: 16px 10px; }
  
  .service-card .btn-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-block-start: 10px;
    color: var(--violet-blue-crayola);
    font-weight: var(--fw-700);
    transition: var(--transition-1);
  }
  
  .service-card .btn-text:is(:hover, :focus-visible) { opacity: 0.9; }
  
  
  
  
  
  /*-----------------------------------*\
    #ABOUT
  \*-----------------------------------*/
  
  .about .container {
    display: grid;
    gap: 50px;
  }
  
  .about .section-title { margin-block-end: 35px; }
  
  .accordion-card .card-title { padding-block-end: 20px; }
  
  .accordion-btn {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .accordion-btn ion-icon {
    font-size: 1.5rem;
    color: var(--blue-crayola);
    transition: var(--transition-1);
  }
  
  .accordion-card.expanded .accordion-btn ion-icon {
    transform: rotate(0.5turn);
  }
  
  .accordion-btn .span { transition: var(--transition-1); }
  
  .accordion-btn:is(:hover, :focus-visible) .span,
  .accordion-card.expanded .accordion-btn .span { color: var(--violet-blue-crayola); }
  
  .accordion-content {
    padding-inline-start: 24px;
    max-height: 0;
    overflow: hidden;
  }
  
  .accordion-card.expanded .accordion-content {
    max-height: max-content;
    padding-block-end: 20px;
  }
  
  
  
  
  
  /*-----------------------------------*\
    #FEATURES
  \*-----------------------------------*/
  
  .feature .container {
    display: grid;
    gap: 50px;
  }
  
  .feature .section-text { margin-block: 25px 30px; }
  
  .feature-list {
    display: grid;
    gap: 15px;
  }
  
  .feature-card {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .feature-card .card-icon {
    background-color: var(--lavender-web);
    font-size: 1.4rem;
    padding: 4px;
    border-radius: var(--radius-circle);
  }
  
  .feature-card .card-icon ion-icon { --ionicon-stroke-width: 40px; }
  
  
  
  
  
  /*-----------------------------------*\
    #STATS
  \*-----------------------------------*/
  
  .stats { background-image: linear-gradient(to bottom, var(--white) 50%, var(--cultured) 50%); }
  
  .stats-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    gap: 36px 24px;
    padding: 45px 30px;
    border-radius: var(--radius-8);
  }
  
  .stats-card .card-text > * { color: var(--white); }
  
  
  
  
  
  /*-----------------------------------*\
    #PROJECT
  \*-----------------------------------*/
  
  .project { background-color: var(--cultured); }
  
  .project :is(.section-subtitle, .section-title) { text-align: center; }
  
  .project .section-title { margin-block-end: 50px; }
  
  .project-card {
    background-color: var(--white);
    border-radius: var(--radius-8);
    overflow: hidden;
    box-shadow: var(--shadow-2);
    height: 100%;
  }
  
  .project-card .card-content { padding: 30px; }
  
  .project-card .card-title { transition: var(--transition-1); }
  
  .project-card .card-title:is(:hover, :focus-visible) { color: var(--violet-blue-crayola); }
  
  .project-card .card-text { margin-block: 16px 20px; }
  
  .project-card .card-meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .project-card .card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--cadet-blue-crayola);
    font-size: var(--fs-8);
  }
  
  
  
  /*-----------------------------------*\
    #CTA
  \*-----------------------------------*/
  
  .cta { background-color: var(--charcoal); }
  
  .cta .container {
    padding-block: 100px 60px;
    border-block-end: 1px solid var(--cadet-blue-crayola_a20);
  }
  
  .cta .section-title {
    color: var(--white);
    margin-block-end: 30px;
  }
  
  .cta .btn {
    background-color: var(--violet-blue-crayola);
    color: var(--white);
    border: none;
  }
  
  
  
  
  
  /*-----------------------------------*\
    #FOOTER
  \*-----------------------------------*/
  
  .footer {
    background-color: var(--charcoal);
    padding-block: 60px 100px;
    color: var(--light-gray);
  }
  
  .footer-brand .footer-text { margin-block: 20px; }
  
  .footer .social-list { color: var(--white); }
  
  .footer-list-title {
    color: var(--white);
    margin-block-end: 16px;
  }
  
  .footer-link {
    padding-block: 4px;
    transition: var(--transition-1);
  }
  
  .footer-link:is(:hover, :focus-visible) { color: var(--violet-blue-crayola); }
  
  .input-wrapper {
    position: relative;
    margin-block-start: 25px;
  }
  
  .input-field {
    background-color: var(--white_a3);
    color: var(--light-gray);
    font-size: var(--fs-7);
    padding: 12px 16px;
    border: 1px solid var(--dark-cornflower-blue_a7);
    border-radius: var(--radius-6);
    box-shadow: var(--shadow-3);
    outline: none;
  }
  
  .input-field::placeholder { color: inherit; }
  
  .submit-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 0 var(--radius-6) var(--radius-6) 0;
    background-color: var(--violet-blue-crayola);
    color: var(--white);
    padding-inline: 24px;
    font-weight: var(--fw-700);
  }
  
  
  
  
  
  /*-----------------------------------*\
    #MEDIA QUERIES
  \*-----------------------------------*/
  
  /**
   * responsive for large than 575px screen
   */
  
  @media (min-width: 575px) {
  
    /**
     * REUSED STYLE
     */
  
    .container {
      max-width: 540px;
      width: 100%;
      margin-inline: auto;
    }
  
  
  
    /**
     * PROJECTS
     */
  
    .project-card .card-content { padding: 40px; }
  
  }
  
  
  
  
  
  /**
   * responsive for large than 768px screen
   */
  
  @media (min-width: 768px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * spacing
       */
  
      --section-padding: 120px;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 720px; }
  
    .grid-list { grid-template-columns: 1fr 1fr; }
  
  
  
    /**
     * HEADER
     */
  
    .header .btn {
      display: block;
      margin-inline-start: auto;
      padding: 8px 20px;
    }
  
    .header.active .btn {
      background-color: var(--violet-blue-crayola);
      border-color: var(--violet-blue-crayola);
      color: var(--white);
    }
  
  
  
    /**
     * HERO
     */
  
    .hero-content {
      max-width: 85%;
      margin-inline: auto;
    }
  
    .hero-text { --fs-5: 2rem; }
  
  
  
    /**
     * SERVICE
     */
  
    .service .section-title {
      max-width: 30ch;
      margin-inline: auto;
    }
  
  
  
    /**
     * ABOUT
     */
  
    .about .container {
      grid-template-columns: 1fr 0.7fr;
      align-items: center;
    }
  
  
  
    /**
     * FEATURE
     */
  
    .feature .container {
      grid-template-columns: 0.7fr 1fr;
      align-items: center;
    }
  
    .feature-banner { order: 1; }
  
  }
  
  
  
  
  
  /**
   * responsive for large than 992px screen
   */
  
  @media (min-width: 992px) {
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 960px; }
  
  
  
    /**
     * HEADER
     */
  
    .nav-open-btn,
    .navbar > *:not(.navbar-list),
    .overlay { display: none; }
  
    .navbar,
    .navbar.active {
      all: unset;
      display: block;
      margin-inline: auto 24px;
    }
  
    .navbar-list {
      display: flex;
      gap: 30px;
    }
  
    .navbar-link {
      color: var(--white);
      transition: var(--transition-1);
    }
  
    .navbar-link:is(:hover, :focus-visible) { opacity: 0.7; }
  
    .header.active .navbar-link { color: var(--charcoal); }
  
    .header.active .navbar-link:is(:hover, :focus-visible) {
      opacity: 1;
      color: var(--violet-blue-crayola);
    }
  
    .header .btn { margin-inline-start: 0; }
  
  
  
    /**
     * HERO
     */
  
    .hero {
      padding-block-start: calc(var(--section-padding) + 50px);
      text-align: left;
    }
  
    .hero .container {
      grid-template-columns: 1fr 0.8fr;
      align-items: center;
    }
  
    .hero-content {
      max-width: unset;
      margin-inline: 0;
    }
  
    .btn-wrapper { justify-content: flex-start; }
  
  
  
    /**
     * STATS
     */
  
    .stats-card { grid-template-columns: repeat(4, 1fr); }
  
  
  
    /**
     * PROJECT
     */
  
    .project .section-title {
      max-width: 32ch;
      margin-inline: auto;
    }
  
  
  
    /**
     * CTA
     */
  
    .cta .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .cta .btn { min-width: max-content; }
  
    .cta .section-title {
      max-width: 30ch;
      margin-block-end: 0;
    }
  
  
  
    /**
     * FOOTER
     */
  
    .footer .grid-list { grid-template-columns: repeat(4, 1fr); }
  
  }
  
  
  
  
  
  /**
   * responsive for large than 1200px screen
   */
  
  @media (min-width: 1200px) {
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 1140px; }
  
  
  
    /**
     * HERO
     */
  
    .hero-text { padding-inline-end: 100px; }
  
  
  
    /**
     * SERVICE
     */
  
    .service .grid-list { grid-template-columns: repeat(4, 1fr); }
  
  
  
    /**
     * STATS
     */
  
    .stats .container { max-width: 70%; }
  
    .stats-card { padding: 60px; }
  
  
  
    /**
     * PROJECT
     */
  
    .project .grid-list { grid-template-columns: repeat(3, 1fr); }
  
  
  
    /**
     * FOOTER
     */
  
    address.footer-text {
      padding-inline-end: 100px;
      margin-block-end: 16px;
    }
  
  }
  
  
  
  
  
  /**
   * responsive for large than 1400px screen
   */
  
  @media (min-width: 1400px) {
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 1320px; }
  
    
  
    /**
     * FEATURE
     */
  
    .feature-list { grid-template-columns: 1fr 1fr; }
  
  }
  
  
  /* ======================================================================================= */
  
/* Service navbar hover and type of services */

  /* Add a black background color to the top navigation */
/* .topnav {
  background-color: #333;
  overflow: hidden;
} */

/* Style the links inside the navigation bar */
/* .topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
} */

/* Add an active class to highlight the current page */
/* .active {
  background-color: #04AA6D;
  color: white;
} */

/* Hide the link that should open and close the topnav on small screens */
/* .topnav .icon {
  display: none;
} */

/* Dropdown container - needed to position the dropdown content */
/* .dropdown {
  float: left;
  overflow: hidden;
} */

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 10px;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-radius: 5px;
}

/* Add a dark background on topnav links and the dropdown button on hover */
/* .topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
} */

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* ================================================================ */


/* =============================================================== */

/* Soil testing  box effects in types */

.service {
  padding: 40px 0; /* Reduce top and bottom padding */
  margin-bottom: 20px; /* Reduce space below services */
}

.service-card {
  padding: 15px; /* Reduce padding inside each card */
  min-height: auto; /* Remove unnecessary height */
}


.section-title1,
.section-text1 { text-align: center; }


.contact-left {
  max-width: 900px;
  margin: 0 auto;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 20px;
  background-color: #f9f9f9;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}


/* ================================================================ */

/* <!-- // Back to Top --> */

#scrollTopBtn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #4a98eb;
  color: white;
  cursor: pointer;
  padding: 7px 15px;
  border-radius: 50px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s;
}

#scrollTopBtn:hover {
  background-color: #0056b3;
}


/* ============================================================== */

/* We love to talk area bold and hover */

/* Style for service cards */
.service-card {
  transition: all 0.3s ease;  /* Smooth transition for all changes */
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.304); /* Stronger shadow */
  cursor: pointer;  /* Pointer cursor on hover */
  font-weight: bold; /* Make the text bold */
}

/* ===================================================================== */


/* Service box hover effect and design */

.service-card {
    position: relative;
    padding: 20px;
    text-align: center;
    border: 2px solid transparent;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.service-card::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border: 2px solid transparent;
    /* border-image-source: linear-gradient(90deg, blue, cyan); */
    border-image-slice: 1;
    /* animation: borderMove 2s linear infinite; */
}

@keyframes borderMove {
    0% {
        border-image-source: linear-gradient(90deg, blue, cyan);
    }
    25% {
        border-image-source: linear-gradient(180deg, blue, cyan);
    }
    50% {
        border-image-source: linear-gradient(270deg, blue, cyan);
    }
    75% {
        border-image-source: linear-gradient(360deg, blue, cyan);
    }
    100% {
        border-image-source: linear-gradient(90deg, blue, cyan);
    }
}

/* Hover Effect */
.service-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 0, 255, 0.5);
}


/* ===================================================================== */
 
/* Background color of soil testing page */

/* Project Section Background */
/* .project {
    background-color: #edf1f5d5; 
    color: white; 
} */

/* Services Section Background */
/* .service {
    background-color: #edf1f5d5; 
    color: white; 
} */


/* ------------------------------------------------------------------------------------------------ */

/* soil testing image  */

.about-banner img {
   
    height: 400px;  /* Maintain aspect ratio */
    /* display: block; */
    border-radius: 20px;
    box-shadow: 0 0 15px rgb(10, 10, 10);
    
  }
  
/* soil testing page height */

  .about {
    margin-bottom: 20px; /* Reduce gap */
    padding-bottom: 40px; /* Adjust if needed */
}

.service {
    margin-top: -110px; /* Reduce gap */
    padding-top: 40px; /* Adjust if needed */

    margin-bottom: -20px; /* Reduce gap */
    padding-bottom: 10px; /* Adjust if needed */
}

  /* soil testing tetx height  */

.h2.section-title {
    margin-bottom: 10px; /* Reduce space below the heading */
}

.accordion-content {
    margin-top: 15px; /* Reduce space above the content */
    padding-top: 0; /* Remove unnecessary padding */
}

/* ============================================ */

/* reduce the footer bottom height */

.footer {
  margin-bottom: 0;
  padding-bottom: 60px; /* Adjust this value */
}

/* ===================================================== */

/* reduce cta height from top  */

.cta {
  padding-top: 10px !important; /* Force reduce top padding */
  margin-top: -30px !important; /* Move it up */
}

.cta .container {
  padding-top: 50px !important; /* Ensure inner content has no extra padding */
}

/* ====================================================== */

/* progress bar */

/* #progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #0050fe, #c8ff02, #ff0000); 
  z-index: 9999;
  transition: width 0.1s ease-out;
} */

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 5px; /* Slightly thicker for visibility */
  background: linear-gradient(90deg, #8b06ffb3, #4000ff, #004cff); /* JRL theme colors */
  border-radius: 5px; /* Rounded edges */
  box-shadow: 0 0 8px rgba(0, 136, 255, 0.8); /* Soft glow effect */
  z-index: 9999;
  transition: width 0.2s ease-out;
}


/* ======================================================== */

/* back to top button design */

#scrollTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #0088ffbd;
  color: white;
  font-size: 22px;
  border: none;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 15px rgba(0, 136, 255, 0.6);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

#scrollTopBtn:hover {
  background: #0f86e7; /* Change color on hover */
  box-shadow: 0 0 20px rgba(255, 102, 0, 0.8);
  transform: rotate(360deg) scale(1.1);
}

/* ====================================================== */


/* ===== Soil Service Accordion ===== */

.service-accordion {
  max-width: 900px;
  margin: auto;
}

.accordion-item {
  margin-bottom: 12px;
}

.accordion-header {
  width: 100%;
  background: #0c2d7a;
  color: #fff;
  padding: 16px 20px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.accordion-body {
  display: none;
  background: #ffffff;
}

.accordion-table {
  width: 100%;
  border-collapse: collapse;
}

.accordion-table td {
  padding: 14px;
  text-align: center;
  border-bottom: 1px solid #eaeaea;
  color: #555;
  font-size: 14px;
}

/* Active */
.accordion-item.active .accordion-body {
  display: block;
}

.accordion-item.active .icon {
  transform: rotate(45deg);
}

/* Mobile */
@media (max-width: 768px) {
  .accordion-header {
    font-size: 15px;
  }
  .accordion-table td {
    font-size: 13px;
  }
}


/* Static blue row (no dropdown, no gap) */
.accordion-header.static-blue {
  background: #0c2d7a;
  color: #ffffff;
  padding: 16px 20px;   /* SAME as dropdown header */
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center; /* FIX vertical alignment */
  border-bottom: 12px solid #ffffff; /* SAME spacing as others */
  cursor: default;
}